<template>
  <div>
    <Banner :bannerData="bannerData"></Banner>
    <Title>推荐专辑</Title>
    <Album :albumData="albumData"></Album>
    <NewSong :newSongData="newSongData"></NewSong>
  </div>
</template>

<script>
import Banner from "../Banner/Banner.vue";
import Title from "../Title/Title.vue"
import Album from "../Album/Album.vue";
import NewSong from "../NewSong/NewSong.vue";
export default {
  data() {
    return {
      bannerURL: `${this.$apiURL}/banner?type=1`,
      albumURL: `${this.$apiURL}/personalized?limit=6`,
      newSongURL: `${this.$apiURL}/personalized/newsong`,
      bannerData:[],
      albumData:[],
      newSongData:[]
    };
  },
  created() {
    this.axios.all([this.getBanner(), this.getAlbum(), this.getNewSong()])
      .then(this.axios.spread((bannerData, albumData, newSongData) => {
          
          this.$saveCache(bannerData, albumData, newSongData)
          this.bannerData=bannerData.data.banners.slice(0,5)
          this.albumData=albumData.data.result
          this.newSongData= newSongData.data.result
        }))
      .catch(  err => {
        if (err.message == "reject") {
          this.bannerData = JSON.parse(localStorage.getItem(this.bannerURL)).data.banners.slice(0,5)
          this.albumData=JSON.parse(localStorage.getItem(this.albumURL)).data.result
          this.newSongData=JSON.parse(localStorage.getItem(this.newSongURL)).data.result
        }
      })
  },
  methods: {
    getBanner() {
      return this.axios.get(this.bannerURL);
    },
    getAlbum() {
      return this.axios.get(this.albumURL);
    },
    getNewSong() {
      return this.axios.get(this.newSongURL);
    },
  },
  components: {
    Banner,
    Album,
    NewSong,
    Title
  },
};
</script>

<style>
</style>